<template>
<div class="content-list">
  <ul class="section-content">
    <li class="content-item" v-for="(item,index) in contentList" :key="index">
      <div class="kuo" @click="goListInfo(item,item.name)">
        <img class="item-img" :src="item.pic">
        <div class="mask">
          <svg class="icon">
            <use xlink:href="#icon-bofang"></use>
          </svg>
        </div>
      </div>
      <p class="item-name">
        {{item.name||item.title}}
      </p>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  name: "ContentList",
  props:['contentList'],
  methods:{
    goListInfo(item,type){
      //type为空，item为歌单
      if (type){
        this.$store.commit('SINGERINFO',item)
        this.$router.push(`/singerInfo/${item.id}`)
      }else {
        this.$store.commit('SONGLISTINFO',item)
        this.$router.push(`/songListInfo/${item.id}`)
      }
    }
  }
}
</script>

<style scoped lang="sass">
@import "../assets/css/content-list.scss"
</style>
